/**
 * 头像组件（带背景色）
 */
import React from 'react';
import { Avatar } from 'antd';
import styles from './index.less';

// 数组中取一个随机的元素
function getRandomElement(array) {
  var randomIndex = Math.floor(Math.random() * array.length);
  return array[randomIndex];
}

export default class extends React.Component {
  static defaultProps = {
    // 姓名
    name: '',
    // 是否展示姓名
    isShowName: false,
    // 颜色 map
    colorMap: {
      A: { color: '#E5484A' },
      B: { color: '#6950FF' },
      C: { color: '#FF9420' },
      D: { color: '#FF9420' },
      E: { color: '#FFC600' },
      F: { color: '#0082D7' },
      G: { color: '#B6A474' },
      H: { color: '#4C6DBD' },
      I: { color: '#34C2B9' },
      J: { color: '#407EFE' },
      K: { color: '#9A4FFF' },
      L: { color: '#FF3BD0' },
      M: { color: '#79869F' },
      N: { color: '#BA7252' },
      O: { color: '#047825' },
      P: { color: '#9E91FF' },
      Q: { color: '#965858' },
      R: { color: '#C6CCDF' },
      S: { color: '#06B96F' },
      T: { color: '#00CFFF' },
      U: { color: '#FF8686' },
      V: { color: '#C7E333' },
      W: { color: '#2352EE' },
      X: { color: '#FF3279' },
      Y: { color: '#477B65' },
      Z: { color: '#99692C' },
    },
  };
  render() {
    const { name, colorMap, isShowName, ...next } = this.props;
    // 昵称
    var userName = '';
    // 背景色
    var color = '';
    // 首字母
    var str = '';

    // 处理背景色
    if (name) {
      userName = name;
      str = name[0].toUpperCase();
      // 如果是英文字母 （设置对应的背景色）
      if (colorMap[str]) color = colorMap[str].color;

      // 中文没有对应的颜色 （随机选一个）
      if (!color) {
        // var key = getRandomElement(Object.keys(colorMap));
        // color = colorMap[key].color;
        color = '#8B91B7';
      }
    }

    return (
      <div className={`${styles.cont}`}>
        <Avatar
          style={{
            backgroundColor: color,
            verticalAlign: 'middle',
          }}
          // 更多参数向下传递
          {...next}
        >
          {str}
        </Avatar>
        {isShowName && <div className={`${styles.name}`}>{userName}</div>}
      </div>
    );
  }
}
